<template>
  <!-- 新增类型dialog -->
  <Edialog
    :title="title"
    :outershow="typeshow"
    saveClick
    @close="closeFn"
    @saveFn="saveFn"
  >
    <div style="padding: 0 20px">
      <el-form ref="form" :model="form" label-width="120px" :rules="leftRules">
        <el-form-item prop="codeTypeCode" label="代码类型编码">
          <el-input
            v-model="form.codeTypeCode"
            placeholder="请输入代码类型编码（1-9）"
            :disabled="title == '修改代码类型'"
          ></el-input>
        </el-form-item>
        <el-form-item prop="codeTypeName" label="代码类型名称">
          <el-input
            v-model="form.codeTypeName"
            placeholder="请输入代码类型名称（1-40）"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </Edialog>
</template>

<script>
import Edialog from '@/components/Edialog'
import { putSysCodeType, postSysCodeType } from '@/api/management/code'
import { fd } from '@/utils/index'
export default {
  components: {
    Edialog
  },
  data () {
    return {
      title: '',
      typeshow: false,
      form: {
        codeTypeCode: '',
        codeTypeName: ''
      },
      leftRules: {
        codeTypeCode: [
          { required: true, message: '请输入代码类型编码', trigger: 'blur' },
          { min: 1, max: 9, message: '长度需要在1-9之间', trigger: 'blur' }
        ],
        codeTypeName: [
          { required: true, message: '请输入代码类型名称', trigger: 'blur' },
          { min: 1, max: 40, message: '长度需要在1-40之间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    open (val) {
      if (val == 'add') {
        this.title = '新增代码类型'
      } else {
        this.title = '修改代码类型'
        this.form.codeTypeName = val.name
        this.form.codeTypeCode = val.id
      }
      this.typeshow = true
    },
    // 保存事件
    saveFn () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let res
          if (this.title == '新增代码类型') {
            res = await putSysCodeType(fd(this.form))
          } else {
            res = await postSysCodeType(fd(this.form))
          }
          if (res.data && res.data.bcode == 0) {
            this.form = {
              codeTypeCode: '',
              codeTypeName: ''
            }
            this.$parent.getData()
            this.$message.success(res.data.bmsg)
            this.typeshow = false
          }
        }
      })
    },
    closeFn () {
      this.form.codeTypeCode = ''
      this.form.codeTypeName = ''
      this.$refs.form.clearValidate()
      this.typeshow = false
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 20px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 354px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
